<script setup>
import CartCard from "@/components/CartCard.vue";
import { useCartStore } from "@/stores/cart.js";
import { useRouter, useRoute } from "vue-router";
import { useUserData } from "@/stores/user.js";
import { useOrderStore } from "@/stores/order.js";
import { ref, computed, reactive } from 'vue';

const cart = useCartStore();
const order = useOrderStore();
const user = useUserData();
const router = useRouter();
const route = useRoute();

const shopCart = computed(() => {
  return cart.cartList.find((item) => item.name == route.query.shopName);
});

const CartCheckList = computed(() => {
 return shopCart.value.list.filter((item) => item.checked);
});

const isShow = ref(false);

const choose = () => {
  router.push({ path: "/address" });
};

const currentAddress = computed(() => {
  console.log(user.userList);
  return user.userList.currrentAddress;
});

const totalP = computed(() => {
  return CartCheckList.value.reduce((sum, product) => sum += product.number*product.price, 0).toFixed(2)
});

const totalC = computed(()=>{
  return CartCheckList.value.reduce((sum,product)=>sum+=product.number,0)
})

const confirm = () => {
  let newOrder = {
        status: '已下单',
        shopCart: shopCart.value,
        totalP: totalP.value,
        totalC: totalC.value
    }
    order.orderList.push(newOrder)
    router.push({path: '/order'}).then(() => {

        // shopCart.list.forEach(item => item.number = 0)

        cart.cartList = cart.cartList.filter(item => item != shopCart)
    })
};
</script>

<template>
  <div class="order_confirmation">
    <div class="order_confirmation_header">
      <div class="order_confirmation_header_title">
        <span class="iconfont title_back" @click="router.back()">&#xe697;</span>
        <div class="title_text">确定订单</div>
      </div>
      <div class="order_confirmation_header_address">
        <div class="address_title">收货地址</div>
        <div class="current_address" @click="choose">
          <div class="current_address_info" v-if="currentAddress">
            <div>{{ currentAddress.address_text }}</div>
            <div>{{ currentAddress.name }} {{ currentAddress.phone }}</div>
          </div>
          <div class="current_address_info" v-else>暂无收货地址</div>
          <div class="iconfont current_address_icon">&#xe697;</div>
        </div>
      </div>
    </div>
    <div class="order_confirmation_content">
      <CartCard :shopCart="shopCart" confirmation="confirmation"/>
    </div>
    <div class="order_confirmation_footer">
      <div class="total_price">
        实付金额: <b>￥{{ totalP }}</b>
      </div>
      <div class="submit" v-if="currentAddress" @click="isShow = !isShow">提交订单</div>
    </div>
    <!-- 蒙层 -->
    <div class="mask" v-if="isShow">
      <div class="mask_content">
        <div class="mask_content_title">确认要离开收银台?</div>
        <div class="mask_content_desc">请尽快完成支付,否则将被取消</div>
        <div class="mask_content_btn">
          <div class="btn cancel" @click="isShow = !isShow">取消订单</div>
          <div class="btn confirm" @click="confirm">确定支付</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.order_confirmation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #eee;

  &_header {
    padding: 0.18rem;
    height: 1.6rem;
    background-image: linear-gradient(
      0deg,
      rgba(0, 145, 255, 0) 4%,
      #0091ff 50%
    );
    background-size: 100% 1.6rem;
    background-repeat: no-repeat;

    &_title {
      display: flex;
      color: $bgColor;

      .title_back {
        font-size: 0.22rem;
      }

      .title_text {
        flex: 1;
        text-align: center;
        font-size: 0.16rem;
      }
    }

    &_address {
      padding: 0.18rem;
      background-color: $bgColor;
      margin-top: 0.28rem;
      line-height: 0.22rem;
      font-size: 0.16rem;
      color: $content_fontcolor;
      border-radius: 0.04rem;

      .address_title {
        margin-bottom: 0.18rem;
      }

      .current_address {
        display: flex;
        justify-content: space-between;

        &_info {
          div:last-child {
            font-size: 0.12rem;
          }
        }

        &_icon {
          transform: rotate(180deg);
          margin-right: 0.08rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }

  &_content {
    width: 100%;
    position: absolute;
    top: 2rem;
    bottom: 0.5rem;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  &_footer {
    height: 0.5rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $bgColor;
    line-height: 0.5rem;
    display: flex;

    .total_price {
      flex: 1;
      padding-left: 0.18rem;
    }

    .submit {
      width: 1rem;
      height: 0.5rem;
      background-color: $btn-bgColor;
      color: $bgColor;
      text-align: center;
      font-size: 0.14rem;
    }
  }

  // 蒙层
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    &_content {
      width: 80%;
      padding: 0.24rem;
      box-sizing: border-box;
      background-color: $bgColor;
      border-radius: 0.04rem;
      text-align: center;

      &_title {
        font-size: 0.18rem;
        font-weight: bold;
        color: $content_fontcolor;
      }

      &_desc {
        margin: 0.12rem 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $medium-fontColor;
      }

      &_btn {
        display: flex;
        justify-content: center;

        .btn {
          width: 0.8rem;
          height: 0.32rem;
          border-radius: 0.24rem;
          font-size: 0.14rem;
          line-height: 0.32rem;
        }

        .cancel {
          margin-right: 0.12rem;
          border: solid 0.01rem $btn-bgColor;
          color: $btn-bgColor;
        }

        .confirm {
          background-color: $btn-bgColor;
          color: $bgColor;
        }
      }
    }
  }
}
</style>